Фото галерея

Автор: Lazy Layman
e-mail: lazylay@windoms.sitek.net
homepage: http://windoms.sitek.net/~lazylay

Данный скрипт позволяет организовать на странице просмотр картинок. При щелчке "мышью" на миниатюре открывается новое окно с полноформатным изображением. URL картинок и размер окон описывается в массивах. Размеры массивов (т.е. количество картинок в галерее) могут быть любыми. В массив imgLib заносятся URL картинок, в imgWidth - ширина окна, а в imgHeight - высота окна. Ширина окна должна быть приблизительно на 15-20, а высота - на 20-25 пикселей больше реального размера картинки.
Внимание! Скрипт необходимо поместить в заголовке страницы между тэгами <HEAD> и </HEAD>, а графические ссылки - между тэгами <BODY> и <BODY>. Кроме того, строка "var paramWnd=...", описывающая параметры окна НЕ ДОЛЖНА содержать пробелов до и после запятых (в противном случае скрипт перестаёт работать в Netscape Navigator/Communicator).

Если есть вопросы - пишите.

ПРИМЕР:
В примере показан фото архив обложек музыкальных альбомов


Посмотреть рисунок Посмотреть рисунок Посмотреть рисунок Посмотреть рисунок
Обложка 1 Обложка 2 Обложка 3 Обложка 3

 

ЛИСТИНГ:

<script language="JavaScript">

<!-- Start Hiding from older browsers

// Массив ссылок на картинки

imgLib=new Array(4);

imgLib[0]="img-big1.jpg";

imgLib[1]="img-big2.jpg";

imgLib[2]="img-big3.jpg";

imgLib[3]="img-big4.jpg";

// Массив ширин картинок

imgWidth=new Array(4);

imgWidth[0]=320;

imgWidth[1]=320;

imgWidth[2]=320;

imgWidth[3]=340;

// Массив высот картинок

imgHeight=new Array(4);

imgHeight[0]=316;

imgHeight[1]=325;

imgHeight[2]=332;

imgHeight[3]=345;

// Функция задания параметров нового окна

function setWH(ndx){

var paramWnd="%22 width="+imgWidth[ndx]+",height="+imgHeight[ndx]+",copyhistory=no,directories=no,menubar=no,resizable=yes,status=no,tollbar=no,scrollbars=no %22"

return(paramWnd)

}

// Функция показа картинки

function showImage(ndx)

{

var tmp;

tmp=setWH(ndx);

imageWindow=window.open(imgLib[ndx],ndx,tmp);

}

// End hiding -->

</script>

 

<!-- Графические ссылки на полноформатные изображения в теле страницы. // -->

<a href="javascript:showImage(0)" onMouseOver="window.status='Посмотреть рисунок'; return true;" onMouseOut="window.status=' '; return true;"><img src="img-sm1.jpg" width="100" height="97" alt="Посмотреть рисунок" border="0"></a>

<br>

<a href="javascript:showImage(1)" onMouseOver="window.status='Посмотреть рисунок'; return true;" onMouseOut="window.status=' '; return true;"><img src="img-sm2.jpg" width="100" height="100" alt="Посмотреть рисунок" border="0"></a>

<br>

<a href="javascript:showImage(2)" onMouseOver="window.status='Посмотреть рисунок'; return true;" onMouseOut="window.status=' '; return true;"><img src="img-sm3.jpg" width="100" height="102" alt="Посмотреть рисунок" border="0"></a>

<br>

<a href="javascript:showImage(3)" onMouseOver="window.status='Посмотреть рисунок'; return true;" onMouseOut="window.status=' '; return true;"><img src="img-sm4.jpg" width="100" height="100" alt="Посмотреть рисунок" border="0"></a>